<template>
  <el-dialog title="项目" v-model="localVisible" width="50%">
    <el-form :model="form" label-width="120px">
      <el-form-item label="项目编号">
        <el-input v-model="form.number"></el-input>
      </el-form-item>
      <el-form-item label="项目名">
        <el-input v-model="form.workOrderNo"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="form.startTime" placeholder="选择开始时间" type="date" value-format="x" class="!w-1/1" />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="form.endTime" placeholder="选择结束时间" type="date" value-format="x" class="!w-1/1" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, computed, defineProps, defineEmits } from 'vue'

const props = defineProps({
  visible: Boolean
}) // eslint-disable-line no-unused-vars

const emit = defineEmits(['update:visible', 'add'])

const localVisible = computed({
  get() {
    return props.visible
  },
  set(value) {
    emit('update:visible', value)
  }
})

const form = reactive({
  number: '',
  startTime: '',
  endTime: '',
  workOrderNo: '',

})

const cancel = () => {
  localVisible.value = false
}

const confirm = () => {
  emit('add', { ...form })
  localVisible.value = false
}
</script>